<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>album管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/elementui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 150px;
            height: 120px;
            display: block;
        }

        /* 批量操作 */
        .bottom-container {
            display: flex;
            justify-content: space-between;
            padding: 0 3em;
        }

        .usr-control {
            padding: 15px;
            height: 28px;
            line-height: 28px;
        }
    </style>

</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理
            <small>图片列表管理</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>图片列表管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="farmas">

                <div class="farmas-title">
                    <div class="farmas-worlds">
                        数据列表
                    </div>
                    <div class="farmas-button">
                        <el-button @click="imageUrl='';addDialogVisible = true">上传图片</el-button>
                        <el-button @click="backHistory">返回</el-button>
                    </div>
                </div>

                <!-- 图片列表 -->
                <div class="farmas-content">
                    <div class="farmas-content-items" v-for="(item,index) in imageList" :key=index>
                        <div class="images">
                            <img :src="item.url" width="160px" height="170px">
                        </div>
                        <div class="controll">
                            <el-checkbox v-model="item.ch" @change=changeState(item,index)></el-checkbox>
                            <a href="javascript:;" @click="moveImg(item,index)">转移相册</a>
                            <a href="javascript:;" @click="deleteImg(item,index)">删除图片</a>
                        </div>
                    </div>
                </div>

                <div class="bottom-container">
                    <!-- 批量操作模块 -->
                    <div class="usr-control">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="select_all"
                                     @change="changeStateAll()">全选
                        </el-checkbox>
                        <el-select size="mini" v-model="controlVal" placeholder="批量操作" style="width:8em">
                            <el-option v-for="item in batchOptions" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog title="转移相册" :visible.sync="moveDialogVisible" width="30%">
        <div style="margin: 14px 24px; display: flex">
            <span style="line-height: 40px; margin-right: 20px;">选择相册 : </span>
            <el-select v-model="targetAlbumId" placeholder="请选择">
                <el-option v-for="item in albumList" :key="item.id" :label="item.title" :value="item.id">
                </el-option>
            </el-select>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="moveDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="moveAlbum">确 定</el-button>
        </span>
    </el-dialog>

    <div class="add-form">
        <!--弹出窗口-->
        <el-dialog title="上传图片" :visible.sync="addDialogVisible">
            <el-form label-width="80px">
                <el-form-item label="品牌图片">
                    <el-upload
                            class="avatar-uploader"
                            action="/upload/native.do"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="uploadImage()">保存</el-button>
                    <el-button @click="addDialogVisible = false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                albumList:[],  //相册列表
                imageList:[],  //当前相册的图片列表
                pojo: {},       //上传图片实体
                albumId:'',
                imageUrl: '',

                isIndeterminate:false,//是否处于选中部分状态
                select_all:false,  //批量操作全选
                choseDataLength: 0,//已选数量
                controlVal:"",//批量操作事件，101 删除  102 转移

                addDialogVisible:false, //显示上传图片
                moveDialogVisible:false,//显示转移图片


                batchOptions:[{  //批量操作--下拉选项
                    value: '101',
                    label: '删除全选'
                },{//批量操作--下拉选项
                    value:'102',
                    label:'转移所选'

                }],

                isBatchMove:false,//是否是批量转移
                moveImageId:'',
                targetAlbumId:'',

                url: {},
                currentDate: new Date()
            }
        },
        created() {
            this.albumId = getQueryString('id');
            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.get(`/album/findImagesById.do?id=${this.albumId}`).then(response => {
                    let imageArr = response.data;
                    /*this.imagesList = JSON.parse(this.pojo.imageItems);   原来自己的代码*/

                    this.imageList = imageArr.map(item=>{
                        item.ch = false;
                        return item
                    })
                });
                // 筛选下拉选项
                axios.get(`/album/findAll.do`).then(response=> {
                    this.albumList = response.data.filter(item => item.id != this.albumId)
                });

            },
            uploadImage() {
                this.pojo.url= this.imageUrl; //如页面有图片上传功能放开注释
                this.pojo.status = "success";
                this.pojo.uid = (new Date()).valueOf();
                axios.post(`/album/addImage.do?albumId=${this.albumId}`,this.pojo).then(response => {
                    this.fetchData ();
                    this.addDialogVisible = false ;
                });
            },
            moveImg(item, index) { // 单个移动
                this.moveImageId = item.uid;
                this.isBatchMove = false;
                this.moveDialogVisible = true;
            },
            batchMoveImg() { // 批量移动
                this.isBatchMove = true;
                this.moveDialogVisible = true;
            },
            deleteImg(item, index) { // 删除触发事件
                this.$confirm('确认删除？')
                    .then(_ => { //删除请求和成功的逻辑
                        axios.get(`/album/deleteImage.do?imageId=${item.uid}&albumId=${this.albumId}`).then(response => {
                            if(response.data.code==0){
                                this.fetchData (); //刷新列表
                            }else{
                                this.$alert(response.data.message)
                            }
                        })
                    })
            },
            changeState(item, index) { //多选状态事件
                console.dir(`多选状态事件---参数体：${item.ch} ; 索引：${index}`);
                var choseData = [];
                var choseIndex = [];
                this.imageList.forEach((item, index) => {
                    if (item.ch == true) {
                        choseData = [item, ...choseData]
                        choseIndex = [index, ...choseIndex]
                    }
                })
                this.choseDataLength = choseData.length //添加全选逻辑
            },
            changeStateAll() { // 全选逻辑判断
                this.imageList.map(item => item.ch = this.choseDataLength != this.imageList.length)
                this.choseDataLength = this.choseDataLength == this.imageList.length ? 0 : this.imageList.length
            },
            handleClose() {},
            moveAlbum() {
                if(this.albumId == this.targetAlbumId){

                }
                this.moveDialogVisible = false;

                if(this.isBatchMove){//批量移动

                    this.imageList = this.imageList.filter(item => item.ch == true)
                    console.log('移动 -> ', this.imageList);
                    let imageArr = '';
                    this.imageList.forEach((item) => {
                        imageArr += ',' + item.uid
                    })
                    if(imageArr.length > 0){
                        imageArr = imageArr.substr(1)
                    }
                    axios.get(`/album/moveImageMany.do?imageIds=${imageArr}&albumId=${this.albumId}&targetAlbumId=${this.targetAlbumId}`).then(response => {
                        if(response.data.code==0){
                            this.fetchData (); //刷新列表
                        }else{
                            this.$alert(response.data.message)
                        }
                    })

                } else {//单个移动
                    axios.get(`/album/moveImage.do?imageId=${this.moveImageId}&albumId=${this.albumId}&targetAlbumId=${this.targetAlbumId}`).then(response=> {
                        if(response.data.code==0){
                            this.fetchData (); //刷新列表
                        }else{
                            this.$alert(response.data.message)
                        }
                    });
                }
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = file.response;
            },
            beforeAvatarUpload(file) {
                const isLt5M = file.size / 1024 / 1024 < 5;

                if (!isLt5M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isLt5M;
            },
            backHistory(){
                location.href=`album.html`
            },
        },
        watch: {
            "imageList": (val, old) => {
                // console.log(val);
            },
            "choseDataLength": function (val, old) {
                this.select_all = val == 0 ? false : true;
                this.isIndeterminate = val == this.imageList.length || val == 0 ? false : true
            },
            "controlVal": function (val, old) { //批量操作事件，101 删除， 102 转移
                if (val == '') return false;
                if (this.choseDataLength == 0) {
                    this.$message({
                        message: '您还未未选择，请选择需要操作的图片',
                        type: 'warning'
                    });
                    this.controlVal = ''
                    return false
                }
                let delet_list = this.imageList.filter(item => item.ch == true)
                if (val == 101) {
                    this.$confirm('确认删除？')
                        .then(_ => { //删除请求和成功的逻辑
                            console.log('删除了', delet_list);
                            //这里插入axio请求实际操作数据库
                            this.imageList = this.imageList.filter(item => item.ch == true);
                            this.controlVal = ''

                            console.log('删除 -> ', this.imageList);
                            let imageArr = '';
                            this.imageList.forEach((item) => {
                                imageArr += ',' + item.uid
                            })
                            if(imageArr.length > 0){
                                imageArr = imageArr.substr(1)
                            }
                            axios.get(`/album/deleteImageMany.do?imageIds=${imageArr}&albumId=${this.albumId}`).then(response => {
                                if(response.data.code==0){
                                    this.fetchData (); //刷新列表
                                }else{
                                    this.$alert(response.data.message)
                                }
                            })
                        });
                }

                if (val == 102) {
                    this.batchMoveImg();
                }
            }
        }
    })
</script>

</html>